<!--  -->
<template>
	<Card title="作答详情">
		<template #header>
			<div class="lsh-info-score" :style="{ color: info?.color }">
				<div class="lsh-score-item">
					<div class="lsh-item-title">平均分</div>
					<div class="lsh-item-content" v-if="info?.avgScore !== null">
						<div class="lsh-score-value">{{ info?.avgScore ?? 0 }}</div>
						<div class="lsh-score-unit">/{{ info?.totalScore ?? 0 }}</div>
					</div>
					<div class="lsh-item-content" v-else>—</div>
				</div>
				<div class="lsh-score-item">
					<div class="lsh-item-title">得分率</div>
					<div class="lsh-item-content" v-if="info?.scoreRate !== null">
						<div class="lsh-score-value">
							{{ ((info?.scoreRate ?? 0) * 100).toFixed(0) }}
						</div>
						<div class="lsh-score-unit">%</div>
					</div>
					<div class="lsh-item-content" v-else>—</div>
				</div>
			</div>
		</template>
		<div class="lsh-detail-list">
			<div
				class="lsh-list-item"
				v-for="(item, index) in computedList"
				:key="item.label"
			>
				<div class="lsh-item-label">{{ item.label }}</div>
				<a-progress
					animation
					class="lsh-item-progress"
					:stroke-width="12"
					:show-text="false"
					:percent="item.percent"
					:color="item.color"
				/>
				<div class="lsh-item-value">{{ item.value }}人</div>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Card from '../card/index.vue'
import { ClassifyData } from '@/api/bigScreenTopic/type'
const props = withDefaults(
	defineProps<{
		info: {
			totalScore: number
			avgScore: number
			scoreRate: number
			classifyData: ClassifyData
			color: string
		}
	}>(),
	{
		info: () => {
			return {
				totalScore: 0,
				avgScore: 0,
				scoreRate: 0,
				classifyData: {},
				color: '#ff4c26'
			}
		}
	}
)
const computedList = computed(() => {
	let total = 0
	const list = Object.entries(props.info.classifyData)
		.map(([key, value]) => {
			total += value.length
			const color =
				value[0]?.myScore === props.info.totalScore ? '#26A555' : '#FF4C26'
			return {
				label: key,
				value: value.length,
				color
			}
		})
		.filter((i) => i.label !== '未提交')
	return list.map((item) => {
		return {
			...item,
			percent: item.value / total
		}
	})
})
</script>
<style scoped lang="less">
.lsh-detail-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	.lsh-list-item {
		display: flex;
		align-items: center;
		gap: 8px;
		.lsh-item-label {
			width: 42px;
			color: #474f59;
		}
		.lsh-item-value {
			width: 32px;
			text-align: end;
			text-wrap: nowrap;
			color: #000;
		}
		.lsh-item-progress {
			flex: 1;
			:deep {
				.arco-progress-line,
				.arco-progress-line-bar {
					border-radius: 4px;
				}
			}
		}
	}
}
.lsh-info-score {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 18px;
	.lsh-score-item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		flex: 1;
		position: relative;
		.lsh-item-title {
			color: #79828f;
			text-align: center;
			font-size: 12px;
			font-weight: 400;
		}
		.lsh-item-content {
			display: flex;
			align-items: end;
			font-size: 14px;
			font-weight: 600;
			line-height: 1;
			.lsh-score-value {
				font-size: 30px;
				font-weight: 600;
				line-height: 1;
			}
			.lsh-score-unit {
				font-size: 14px;
				font-weight: 600;
				line-height: 1;
			}
		}
		&:nth-child(n + 2)::before {
			content: '';
			position: absolute;
			width: 1px;
			height: 8px;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			background: #e1e5eb;
		}
	}
}
</style>
